<template>
  <div class="login">
    <van-nav-bar
      title="登录"
      left-text="返回"
      right-text="注册"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <!-- 使用mintui组件创建登录页面 -->
    <div>
      <!-- :attr给组件内部的input标签添加原生属性 -->
      <mt-field
        v-model="phone"
        type="text"
        label="手机号"
        placeholder="请输入手机号"
        :attr="{ maxlength: 11 }"
      ></mt-field>
      <mt-field
        v-model="upwd"
        type="password"
        label="密码"
        placeholder="请输入密码"
      ></mt-field>
      <mt-button type="default" size="large" @click="login">登录</mt-button>
    </div>
  </div>
</template>

<script>
// 引入
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      phone: "",
      upwd: "",
    };
  },
  //取值
  computed: {
    ...mapState["islogin"],
  },

  methods: {
    // 调用公共池子的函数，给status赋予新状态
    // 组件没有复用，涉及到点击直接引入，并添加跳转
    onClickLeft() {
      //   Toast("返回");
      this.$router.push("/my");
    },
    onClickRight() {
      this.$router.push("/register");
    },
    // 登录
    login() {
      // 拿islogin的状态进行判断
      if (this.islogin == true) console.log(this.phone, this.upwd);
      const url = "http://127.0.0.1:3000/user/login";
      const params = { upwd: this.upwd, phone: this.phone };
      // `upwd=${this.upwd}&phone=${this.phone}`
      this.axios.post(url, params).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          // 调用store中的setUname的方法！！！！！！！！！！！！，将手机号赋值给这个方法，上方state中的uname就会保存手机号码
          this.$store.commit('setUname',this.phone)
          // 调用setIslogin这个方法
          // this.$store.setIslogin
          // 由于登录的时候已经通过拦截器给islogin赋值了，所以下面的代码可以不写
          // this.$store.state.islogin=true
          // 当登录成功后弹框.点击确定按钮跳转至上一个页面
          this.$messagebox('登陆成功，即将跳转...').then(()=>{
            this.$router.back();
            this.$store.commit('setIslogin',true)
          })
          // this.$store.state.islogin = true;
          
        } else {
          this.$messagebox("请先登录").then(() => {
            this.$router.push("/login");
          });
          //        if(res.data.code==200){
          //   alert("登录成功！");
          // }else{
          //   alert("登录失败！");
          // 如果登录成功跳转到数据页面
          //        this.$router.push('/my')
          // this.$router.back()
        }
      });
    },
    ...mapMutations(["setIslogin"]),

  },
};
</script>

<style lang="scss" scoped>
// ::v-deep样式穿透，修改框架样式
::v-deep .van-nav-bar__text {
  color: #000;
}
::v-deep .van-icon-arrow-left:before {
  color: #000;
}
</style>